<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script type="text/javascript" src="js/init.js"></script>
		<style>
			.bounce{
				-webkit-animation:bounce 1.5s .2s ease infinite;
				-moz-animation:bounce 1.5s .2s ease infinite;
			}
			@-webkit-keyframes bounce{
				0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
				40%{-webkit-transform:translateY(-30px)}
				60%{-webkit-transform:translateY(-15px)}
			}
			@-moz-keyframes bounce{
				0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
				40%{-moz-transform:translateY(-30px)}
				60%{-moz-transform:translateY(-15px)}
			}
			
		</style>
	</head>
	<body>
		<div class="game3 pr">
			<p><img src="img/guo3-title.png" class="guo3-title"/></p>
			<p class="mt30"><img src="img/guo3.png" class="guo3"></p>
			<p><img src="img/guo3-footer.png" class="guo3-footer"></p>
		</div>
		<div class="game3 pr d-n">
			<div class="guo3-3selected pa">
				<div class="item i1">
					<img src="img/guo3-2.png" class="d-n"/>
					<div class="wid100 fl pr" style="top: -1.25rem;">
						<img src="img/guo3-1gai.png" style="width: 75%;" class="wrap guo3-2gai2 bounce"/>
						<img src="img/guo3-1dizhen.png" class="wrap wid80"/>
					</div>
				</div>
				<div class="item i2">
					<img src="img/guo3-2.png" class="d-n"/>
					<div class="wid100 fl pr" style="top: -1.25rem;">
						<img src="img/guo3-1gai.png" style="width: 75%;" class="wrap guo3-2gai2 bounce"/>
						<img src="img/guo3-1dijia.png" class="wrap wid80"/>
					</div>
				</div>
				<div class="item i3">
					<img src="img/guo3-2.png" class="d-n"/>
					<div class="wid100 fl pr" style="top: -1.25rem;">
						<img src="img/guo3-1gai.png" style="width: 75%;" class="wrap guo3-2gai2 bounce"/>
						<img src="img/guo3-1dijia.png" class="wrap wid80"/>
					</div>
				</div>
			</div>
			<div class="guo3-2footer">
				<img src="img/guo2-1footer.png" class="price-footer"/>
			</div>
			<a href="javascript:void(0);" class="start-btn guo3-2btn">
				<img src="img/start-btn.png" class="wid100"/>
			</a>
		</div>
		<div class="game3 pr d-n">
			<div class="zhenguo">
				<p><img src="img/guo3-3gai.png" class="wrap bounce"/></p>
				<p><img src="img/guo3-3dizhen.png" class="wrap" style="width: 65%;"/></p>
			</div>
			<div class="guo3-2footer">
				<img src="img/guo3-3footer.png"/>
			</div>
			<a href="javascript:void(0);" class="start-btn guo3-3btn">
				<img src="img/guo3-3btn.png" class="wid100"/>
			</a>
		</div>
		<div class="game3 pr d-n">
			<div class="zhenguo">
				<p><img src="img/guo3-4gai.png" class="wrap bounce"/></p>
				<p><img src="img/guo3-4dijia.png" class="wid60 wrap"/></p>
			</div>
			<div class="guo3-2footer">
				<img src="img/guo3-4footer.png"/>
			</div>
			<div class="start-btn">
				<p class="guo1-5btn1"><a href="game1.html"><img src="img/guo1-5btn1.png" class="wid100"/></a></p>
				<p class="guo1-5btn2"><a href="../game/index.html"><img src="img/guo1-5btn2.png" class="wid100"/></a></p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			/***禁止滑动***/
			var mo = function(e){e.preventDefault();};
			function stop(){
		        document.body.style.overflow='hidden';        
		        document.addEventListener("touchmove",mo,false);//禁止页面滑动
			}
			stop();
			
			
			//抽奖代码
			var itemMove = Math.floor(Math.random() * 2);
			var level = 200;
			$('.item').each(function(){
				var size = $('.item').size();
				var index = $('.item').index($(this));
			});
	
			$('.guo3-2btn').click(function(){
				$('.item .d-n').removeClass('d-n');
				$('.item .wid100').hide();
				$('.price-footer').attr('src','img/guo3-2footer.png');
				$(this).click(function(){
					$(this).fadeOut();
					var gamestart = setInterval(function(){
						changePosition(level);
					},level);
			
					setTimeout(function(){
						clearInterval(gamestart);
						//中奖
						$('.i2').click(function(){
							$('.game3').hide();
							$('.game3').eq(2).fadeIn();
							win_price = true;
						});
						//不中奖
						$('.i1,.i3').click(function(){
							$('.game3').hide();
							$('.game3').eq(3).fadeIn();
							win_price = false;
						});
					},2000);
				});
			});

			function changePosition(level){
				var itemMove = Math.floor(Math.random() * 3);
				console.log(itemMove);
				var itemCurrent;
				if(itemMove == 1){
					itemCurrent = Math.floor(Math.random() * 3) > 1 ? 0:2;
					if(itemCurrent == 0){
						var top = '60%';
						var left = '52.5%';
						var top1 = '60%';
						var left1 = '2.5%';
						move();
						$('.item').eq(2).animate({'top':'0','left':'27.5%'},level);
					}else if(itemCurrent == 2){
						var top = '60%';
						var left = '52.5%';
						var top1 = '0';
						var left1 = '27.5%';
						move();
						$('.item').eq(0).animate({'top':'60%','left':'2.5%'},level);
					}
				}else if(itemMove == 2){
					itemCurrent = Math.floor(Math.random() * 3) > 1 ? 1:0;
					if(itemCurrent == 1){
						var top = '0';
						var left = '27.5%';
						var top1 = '60%';
						var left1 = '52.5%';
						move();
						$('.item').eq(0).animate({'top':'60%','left':'2.5%'},level);
					}else if(itemCurrent == 0){
						var top = '0';
						var left = '27.5%';
						var top1 = '60%';
						var left1 = '2.5%';
						move();
						$('.item').eq(1).animate({'top':'60%','left':'52.5%'},level);
					}
				}else if(itemMove == 0){
					itemCurrent = Math.floor(Math.random() * 3) > 1 ? 1:2;
					if(itemCurrent == 1){
						var top = '60%';
						var left = '2.5%';
						var top1 = '60%';
						var left1 = '52.5%';
						move();
						$('.item').eq(2).animate({'top':'0','left':'27.5%'},level);
					}else if(itemCurrent == 2){
						var top = '60%';
						var left = '2.5%';
						var top1 = '0';
						var left1 = '27.5%';
						move();
						$('.item').eq(1).animate({'top':'60%','left':'52.5%'},level);
					}
				}
				function move(){
					var current = $('.item').eq(itemMove);
					var thisItem = $('.item').eq(itemCurrent);
					current.stop(true,true);
					thisItem.stop(true,true);
					console.log(top);
					/*var top = current.css('top');
					var left = current.css('left');*/
					/*var top1 = thisItem.css('top');
					var left1 = thisItem.css('left');*/
					var index = current.attr('index');
		
					$('.item[current]').css('zIndex',thisItem.css('zIndex')).removeAttr('current');
					current.attr('index',thisItem.attr('index'));
					current.animate({top:top1,left:left1},level);
					thisItem.css('zIndex',999);
					thisItem.attr('current','');
					thisItem.animate({top:top,left:left},level);
				}	
			}	
		
			
			//game流程
			var win_price;//判断是否中奖的标记
			$('.game3').eq(0).click(function(){
				$('.game3').hide();
				$('.game3').eq(1).fadeIn();
			});
			
			$('.guo3-3btn').click(function(){
				$('.guo3-2btn').show();
				$('.game3').hide();
				$('.game3').eq(0).fadeIn();
			});
			
			
			//不能通关game3
			$('.guo1-5btn1').click(function(){
				window.location = "game1.html";
			});
		});
	</script>
</html>
